<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body style="margin: 10px;">
    <button class="btn btn-primary" id="addbtn">新增</button>
    <button class="btn btn-primary" id="updatebtn">编辑</button>
    <button class="btn btn-primary" id="delbtn">删除</button>
    <button class="btn btn-primary" id="selectbtn">查询</button>
    <input  id="workselect" placeholder="按工号查询">
    <input  id="nameselect" placeholder="按姓名查询">
    <br>
    <br>
    <table class="table table-hover">
        <tr >
            <th>序号</th>
            <th>工号</th>
            <th>姓名</th>
            <th>性别</th>
            <th>密码</th>
            <th>年龄</th>
            <th>出生日期</th>
        </tr>
        <tr class="info">
            <td>
                <input type="checkbox" class="checkbox">
            </td>
            <td>1001</td>
            <td>张三</td>
            <td>女</td>
            <td>1234</td>
            <td>29</td>
            <td>1991-1-1</td>
        </tr>
        <tr class="warning">
            <td>
                <input type="checkbox" class="checkbox">
            </td>
            <td>1002</td>
            <td>李四</td>
            <td>男</td>
            <td>1234</td>
            <td>28</td>
            <td>1992-2-2</td>
        </tr>
        <tr class="info">
            <td>
                <input type="checkbox" class="checkbox">
            </td>
            <td>1003</td>
            <td>王五</td>
            <td>女</td>
            <td>1234</td>
            <td>27</td>
            <td>1993-3-3</td>
        </tr>
        <tr class="warning">
            <td>
                <input type="checkbox" class="checkbox">
            </td>
            <td>1004</td>
            <td>赵六</td>
            <td>女</td>
            <td>1234</td>
            <td>26</td>
            <td>1994-4-4btn</td>
        </tr>
    </table>

    <script src="js/bootstrap.min.js"></script>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script>
        var index = 1;
        //编辑
        $("#updatebtn").click(function(){
            $("tr").slice(1).each(
                function(){
                    var td=$(this).children()[0];
                    var input=$(td).children()[0];
                    if(input.checked){
                        $(this).children().slice(1).attr("contenteditable", "true");
                    }
                }
            )
        })


        //查询
        $("#selectbtn").click(function(){
            var inputname=$("#nameselect").val();
            var inputid=$("#workselect").val();
            $("tr").slice(1).each(
                function(){
                    var id=$(this).children()[1];
                    id =$(id).text();
                    var name=$(this).children()[2];
                    name =$(name).text();
                    if(inputname==name|| inputid==id){
                            $(this).show();
                    }else{
                       
                        $(this).hide();
                    }
                }
            )
        })
        


        //新增按钮
        $("#addbtn").click(function(){
                index++;
                var newtr=$("<tr></tr>");
                var newtd = $("<td><input type='checkbox'/></td><td></td><td></td><td></td><td></td><td></td><td></td>");
                $("tr:last").after(newtr);
                $("tr:last").append(newtd);
                
                if (index % 2 == 0) {
                $("tr:last").attr("class", "info");
            } else {
                $("tr:last").attr("class", "warning");
            }

        
         })


         //删除按钮
         $("#delbtn").click(function(){
            //从1开始的tr遍历，如果每行的第一个按钮被选中，就删除这一行
            $("tr").slice(1).each(function () {
            var td = $(this).children()[0];
            var input = $(td).children()[0];
            if (input.checked) {
                //删除节点
            $(this).remove();
            }
        });
        }
            )
    

    </script>
</body>
</html>